import React from 'react';
import { Button, Form, Input } from 'antd';
import { CheckOutlined, LockOutlined, UserOutlined, CommentOutlined, PhoneOutlined } from '@ant-design/icons';
import './addUser.css';
import { message } from 'antd/es';
import { addUser } from '../../services/userServices';

class AddUser extends React.PureComponent {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  onFinish = async (values) => {
    try {
      await addUser(values);
      message.info('User added successfully');
      this.props.refreshPage();
      this.props.closeDrawer();
      this.formRef.current.resetFields();
    } catch (error) {
      message.error(error.message || 'Failed to add user');
    }
  };

  render() {
    return (
      <>
        <div id="add-content">
          <Form
            name="增加用户信息"
            className="add-form"
            size="large"
            ref={this.formRef}
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="userName"
              size="large"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
                {
                  pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,6}$/,
                  message: '用户名只能是6位中文、字母、数字或下划线',
                }
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
                {
                  pattern: /^[a-zA-Z0-9_]{6,12}$/,
                  message: '密码只能是6位以上12位以下字母、数字或下划线',
                }
              ]}
            >
              <Input.Password
                size="large"
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="Password"
              />
            </Form.Item>

            <Form.Item
              name="deptId"
              size="large"
              rules={
                [
                  {
                    required: true,
                    message: '请输入部门代号!',
                  },
                  {
                    pattern: /^[0-9]{1,2}$/,
                    message: '部门代号只能是2个数字',
                  }
                ]
              }
            >
              <Input prefix={<CommentOutlined className="site-form-item-icon" />} placeholder="DeptId" />
            </Form.Item>

            <Form.Item
              name="phone"
              size="large"
              rules={
                [
                  {
                    required: true,
                    message: '请输入联系方式!',
                  },
                  {
                    pattern: /^1[3456789]\d{9}$/,
                    message: '联系方式只能是中国手机号码',
                  }
                ]
              }
            >
              <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="Phone" />
            </Form.Item>

            <Form.Item
              name="remark"
              size="large"
              rules={
                [
                  {
                    pattern: /^[a-zA-Z0-9_]{0,200}$/,
                    message: '备注只能是200位以内字母、数字或下划线',
                  }
                ]
              }
            >
              <Input prefix={<CheckOutlined className="site-form-item-icon" />} placeholder="Remark" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="sign-form-button">
                添加
              </Button>
            </Form.Item>
          </Form>
        </div>
      </>
    );
  }
}

export default AddUser;
